<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.menu{
				font-family: "黑体";
				width: 440px;
				margin: 0;
			}
			
			.menu ul{
				padding: 0;
				list-style-type:none;
			}
			.menu ul li {
				float: left;
				position: relative;
			}
			
			.menu ul li a, menu ul li a:visited {
				display: block;
				text-align: center;
				text-decoration: none;
				width: 104px;
				height: 30px;
				color: #000000;
				border: 1px solid #fff;
				border-width: 1px 1px 0 0;
				background: #5678ee;
				line-height: 30px;
				font-size: 14px;
			}
			.menu ul li:hover a{
				color: #FFFFFF;
			}
			.menu ul li ul {
				display: none;
			}
			
			.menu ul li:hover ul{
				display: block;
				position: absolute;
				top: 31px;
				left: 0px;
				width: 105px;
			}
			.menu ul li:hover ul li a{
				display: block;
				background-color: #ff4321;
				color: #000000;
			}
			.menu ul li:hover ul li a:hover{
				background: #dfc184;
				color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<ul>
				<li>
					<a href="#">文件</a>
					<ul>
						<li><a href="#">打开</a></li>
						<li><a href="#">保存</a></li>
						<li><a href="#">新建</a></li>
					</ul>
				</li>
				<li>
					<a href="#">查看</a>
					<ul>
						<li><a href="#">工具栏</a></li>
						<li><a href="#">标尺</a></li>
						<li><a href="#">缩放</a></li>
					</ul>
				</li>
				<li>
					<a href="#">修改</a>
					<ul>
						<li><a href="#">属性</a></li>
						<li><a href="#">样式</a></li>
					</ul>
				</li>
				<li>
					<a href="#">窗口</a>
					<ul>
						<li><a href="#">历史记录</a></li>
						<li><a href="#">颜色</a></li>
						<li><a href="#">时间轴</a></li>
					</ul>
				</li>
			</ul>
			<div class="clear"></div>
		</div>

	</body>
</html>
